<%@ page contentType="text/html; charset=UTF-8" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Page</title>
    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <!-- 引入ECharts -->
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 在这里添加你的ECharts图表 -->
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script>
        // 在页面加载完成后从Servlet获取数据并创建ECharts图表
        document.addEventListener('DOMContentLoaded', function () {
            // 发送GET请求到Servlet
            fetch('echarts2')
                .then(response => response.json())
                .then(data => {
                	console.log(data.data.categories)
                    // 创建ECharts图表
                    var myChart = echarts.init(document.getElementById('chart'));
                    myChart.setOption({
                        title: { text: 'ECharts 示例' },
                        xAxis: { data: data.data.categories },
                        yAxis: {},
                        series: [{
                            name: '数值',
                            type: 'bar',
                            data: data.data.values
                        }]
                    });
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        });
    </script>
</body>
</html>
    